<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.css" />
		<style type="text/css">
			div{margin-left:200px;border-radius: 50%;width: 20px;height: 20px;border: 1px solid black;color: gold;}
		</style>
	</head>

	<body>

		<div class="fa  fa-2x" :class="{'fa-check-square':checked}" @click="checked=!checked">
			
		</div>
		<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
		<script src="vue.min.js"></script>
		<script type="text/javascript">
			new Vue({
				el:'div',
				data:{
					checked:true
				}
			})
		</script>
	</body>

</html>